<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { EVENT_USER_INFO } from 'constants/'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapState(['clientType'])
  },
  methods: {
    ...mapMutations({
      setUserInfo: 'setUserInfo',
      setUnreadNoticeCount: 'setUnreadNoticeCount',
      setApproval: 'setApproval'
    }),
    init() {
      this.initEvents()
    },
    handleUserInfo(data) {
      if (data) {
        const {
          school,
          company,
          student,
          unreadNoticeCount,
          approvalStatus,
          approvalReason
        } = data
        if (this.clientType === 'school') {
          this.setUserInfo(school)
        } else if (this.clientType === 'company') {
          this.setUserInfo(company)
        } else {
          this.setUserInfo(student)
        }
        this.setApproval({ approvalStatus, approvalReason })
        this.setUnreadNoticeCount(unreadNoticeCount)
      } else {
        this.setUserInfo(null)
      }
    },
    initEvents() {
      this.$bus.$on(EVENT_USER_INFO, this.handleUserInfo)
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.$bus.$off(EVENT_USER_INFO, this.handleUserInfo)
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
#app {
  width: 100%;
  height: 100%;
  // min-height: 100%;
  // background-color: $colorBGDark;
  // color: $colorText1;
  font-size: $fontSize1;
}
</style>
